<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>口袋买房</title>
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/swiper.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/utils.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/swiper.min.js"></script>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>

	<body style="display: none;">
		<div id="page_header" class="page-header"></div>
		<div id="page_menu" class="content-area menu items-display-flex flex-row flex-between"></div>
		<div id="city_sets"></div>
		<div id="maincontent">
			<div class="swiper-container swiper-container1">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for=" pic in banner">
						<div class="bannerbox">
							<div class="banner">
								<img v-bind:src="pic.advicon" v-on:click="toAdv(pic.houseid)" />
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-pagination sp1"></div>
			</div>
			<div class="search-part">
				<div class="content-area content">
					<div class="search-menu" v-on:mousemove.capture v-on:click="selectevent">
						<div class="part1 border-style items-display-flex flex-row flex-between">
							<input placeholder="楼盘名/关键字" v-model="sname" id="indexsearchtxt"/>
							<div class="search-btn select" onclick="doKeyWordSearch()">
								<img src="../img/index/search.png" />
							</div>
						</div>
						<div class="part2" >
							热门搜索：<span v-on:click="toHotCity(130)" style="cursor: pointer;">北京</span>&nbsp;
							<span v-on:click="toHotCity(1)" style="cursor: pointer;">上海</span>
						</div>
						<div class="part2" style="margin-top: 65px;">
							<div>条件找房：</div>
							<div class="part2-items items-display-flex flex-row flex-between flex-display-warp">
								<div class="item border-style select poz-relative">
									<a onclick="chooseSelectTarget(1)">{{typename}}<span class="iconfont icon-xiaotuziCduan_"></span></a>
									<div id="sflag1" class="drop-down-content" style="display: none;">
										<div class="trangle"><span class="iconfont icon-sanjiaoxing-up"></span></div>
										<div class="contents">
											<div class="content" v-for="site in categoryArr" v-on:click="selectCategory(site)">{{site.category}}</div>
										</div>
									</div>
								</div>

								<div class="item border-style select poz-relative">
									<a onclick="chooseSelectTarget(2)">{{roomname}}<span class="iconfont icon-xiaotuziCduan_"></span></a>
									<div id="sflag2" class="drop-down-content" style="display: none;">
										<div class="trangle"><span class="iconfont icon-sanjiaoxing-up"></span></div>
										<div class="contents">
											<div class="content" v-for="site in houseTypeArr" v-on:click="selectHousetype(site)">{{site.house_type}}</div>
										</div>
									</div>
								</div>
								<!--<div class="item border-style select poz-relative">
									<a onclick="chooseSelectTarget(3)">{{hareaname}}<span class="iconfont icon-xiaotuziCduan_"></span></a>
									<div id="sflag3" class="drop-down-content" style="display: none;">
										<div class="trangle"><span class="iconfont icon-sanjiaoxing-up"></span></div>
										<div class="contents">

											<div class="content" v-on:click="selectharea()">80-90平</div>
											<div class="content" v-on:click="selectharea()">90-110平</div>
											<div class="content" v-on:click="selectharea()">110-140平</div>
											<div class="content" v-on:click="selectharea()">140平以上</div>
										</div>
									</div>
								</div>-->
								<div class="item border-style select poz-relative">
									<a onclick="chooseSelectTarget(4)">{{pricename}}<span class="iconfont icon-xiaotuziCduan_"></span></a>
									<div id="sflag4" class="drop-down-content" style="display: none;width: 110px;">
										<div class="trangle"><span class="iconfont icon-sanjiaoxing-up"></span></div>
										<div class="contents">
											<div class="content" v-for="site in pricesArr" v-on:click="selectPrice(site)">{{priceShow(site.text)}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="start-search-btn border-style select" onclick="doSearchHouse()">
							筛选
						</div>
					</div>
				</div>
			</div>
			<div class="content-area main-part">
				<div class="part1">
					<div class="title">热门好房，为你而选</div>
					<div class="content items-display-flex flex-row flex-between">
						<div class="big poz-relative" v-for=" site in goodHouse1">
							<img v-bind:src="site.advicon" v-on:click="tohouse(site.houseid)" />
							<div class="img-lab items-display-flex flex-row flex-between">
								<div class="lab-cont1">
									<div class="lab1">{{site.house_name}}</div>
									<div class="lab2">地址：{{site.address}}</div>
								</div>
								<div class="lab-cont2">
									<div class="lab3">口袋返现</div>
									<div class="lab4">{{site.house.return_money}}万/套</div>
								</div>
							</div>
						</div>
						<div class="right items-display-flex flex-column flex-between">
							<div class="item poz-relative" v-for=" site in goodHouse2">
								<img v-bind:src="site.advicon" v-on:click="tohouse(site.houseid)" />
								<div class="img-lab items-display-flex flex-row flex-between">
									<div class="lab-cont3">
										<div class="lab5">{{site.house_name}}</div>
									</div>
									<div class="lab-cont4">
										<div class="lab6">口袋返现</div>
										<div class="lab7">{{site.house.return_money}}万/套</div>
									</div>
								</div>
							</div>
						</div>
						<div class="right items-display-flex flex-column flex-between">
							<div class="item poz-relative" v-for=" site in goodHouse3">
								<img v-bind:src="site.advicon" v-on:click="tohouse(site.houseid)" />
								<div class="img-lab items-display-flex flex-row flex-between">
									<div class="lab-cont3">
										<div class="lab5">{{site.house_name}}</div>
									</div>
									<div class="lab-cont4">
										<div class="lab6">口袋返现</div>
										<div class="lab7">{{site.house.return_money}}万/套</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="part2">
					<img src="../img/index/line2.png" />
				</div>
				<div class="part3">
					<div class="title">推荐楼盘</div>
					<div class="content items-display-flex flex-row flex-between" style="align-items: flex-start;">
						<div v-for="item in hdata1" class="item poz-relative" v-on:click="tohouse(item.id)">
							<div class="poz-relative size">
								<img v-bind:src="item.img_path" />
								<div class="img-lab items-display-flex flex-row flex-between">
									<div class="lab-cont3">
										<div class="lab5">{{item.house_name}}</div>
									</div>
									<div class="lab-cont4">
										<div class="lab6">口袋返现</div>
										<div class="lab7">{{item.return_money}}万/套</div>
									</div>
								</div>
							</div>
							<div class="intro">
								<div class="title">
									<span>{{item.house_unit_price}}</span>元/平米
								</div>
								<div class="addr">
									地址：{{item.address}}
								</div>
								<div class="flag items-display-flex flex-row flex-display-warp">
									<div v-for="flagitem in item.marks">{{flagitem}}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="more-btn" v-on:click="tohouselist()">
						查看更多楼盘
					</div>
				</div>
				<div class="part2">
					<img src="../img/index/line3.png" />
				</div>
				<div class="part3">
					<div class="title">海外置业</div>
					<div class="content items-display-flex flex-row flex-between" style="align-items: flex-start;">
						<div v-for="item in hdata2" class="item poz-relative" v-on:click="tohouse(item.id)">
							<div class="poz-relative size">
								<img v-bind:src="item.img_path" />
								<div class="img-lab items-display-flex flex-row flex-between">
									<div class="lab-cont3">
										<div class="lab5">{{item.house_name}}</div>
									</div>
									<div class="lab-cont4">
										<div class="lab6">口袋返现</div>
										<div class="lab7">{{item.return_money}}万/套</div>
									</div>
								</div>
							</div>
							<div class="intro">
								<div class="title" v-if="item.house_unit_price>0">
									<span>{{item.house_unit_price}}</span>元/平米
								</div>
								<div class="title" v-if="item.house_unit_price<=0">
									<span style="font-size: 20px;">售价待定</span>
								</div>
								<div class="addr">
									地址：{{item.address}}
								</div>
								<div class="flag items-display-flex flex-row flex-display-warp">
									<span v-for="flagitem in item.marks">{{flagitem}}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="more-btn" v-on:click="tohouselist('hwzy.html')">
						查看更多楼盘
					</div>
				</div>
				<div class="part2">
					<img src="../img/index/line1.png" />
				</div>
				<div class="part3">
					<div class="title">优选公寓租房</div>
					<div class="content">
						<div class="swiper-container swiper-container2" style="padding-bottom: 40px;">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="item in hdata3">
									<div class="swp items-display-flex flex-row flex-between">
										<div class="poz-relative img-cont" v-for="peritem in item">
											<img v-bind:src="peritem.img_path" v-on:click="torhouse(peritem)" />
											<div class="img-lab no-padding" style="background: none;">
												<div class="lab-cont5"><span>{{peritem.house_unit_price}}元/月</span>起</div>
												<div class="special-bg-view">地址：{{peritem.address}}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination sp2"></div>
							<div class="swiper-button-next next"><span class="iconfont icon-nvxingfuben1"></span></div>
							<div class="swiper-button-prev prev"><span class="iconfont icon-nvxingfuben"></span></div>
						</div>
					</div>
					<div class="more-btn" v-on:click="tohouselist('kdzf.html')">
						查看更多租房
					</div>
				</div>
			</div>
		</div>
		<div class="flag-bg">
			<div class="content-area ">
				<div class="spec-flag items-display-flex flex-row flex-between">
					<div class="item">
						<img src="../img/index/icon1.png" />
						<div class="lab1">
							省钱
						</div>
						<div class="lab2">
							售价返现平台
						</div>
					</div>
					<div class="item">
						<img src="../img/index/icon2.png" />
						<div class="lab1">
							覆盖
						</div>
						<div class="lab2">
							你要的都在这
						</div>
					</div>
					<div class="item">
						<img src="../img/index/icon3.png" />
						<div class="lab1">
							规范
						</div>
						<div class="lab2">
							保证客户利益
						</div>
					</div>
					<div class="item">
						<img src="../img/index/icon4.png" />
						<div class="lab1">
							安心
						</div>
						<div class="lab2">
							专业团队护航
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="page_footer" class="page-footer no-margin"></div>
		
		<div style="display: none;">
			<script src="https://s13.cnzz.com/z_stat.php?id=1275078345&web_id=1275078345" language="JavaScript"></script>
		</div>
	</body>
	<script>

		var maincnt = new Vue({
			el: '#maincontent',
			data: {
				banner: [],
				hdata1: [],
				hdata2: [],
				hdata3: [],
				allcity: [],
				goodHouse1: [],
				goodHouse2: [],
				goodHouse3: [],
				pricesArr: [],
				houseTypeArr: [],
				categoryArr: [],
				RentpricesArr:[],
				sname: '',
				stype: 0,
				sroom: 0,
				sharea: 0,
				sprice: 0,
				sregion: 0,
				typename: '类型:',
				roomname: '户型:',
				hareaname: '面积:',
				pricename: '单价:',

			},
			methods: {
				tohouse: function(hid) {
					var urlstr = 'xfdetail.html?hid=' + hid;
					window.open(urlstr);
				},
				toAdv: function(hid) {
					var urlstr = "";
					if(hid == 150){
						urlstr = 'page1.html';
					}
					else{
						urlstr = 'xfdetail.html?hid=' + hid;
					}
					window.open(urlstr);
				},
				torhouse: function(rid) {
					var urlstr = 'rentdetail.html?houseid=' + rid.id;
					window.open(urlstr);
				},
				tohouselist: function() {
					var torul= arguments[0] || ''; 
					var urlstr = 'qgxf.html';
					if(torul && torul != '') {
						urlstr = torul;
					}
					window.open(urlstr);
				},
				selectCategory: function(objs) {

					maincnt.stype = objs.id;
					CloseSelectTarget(1);
					maincnt.typename = objs.category;
				},
				selectHousetype: function(objs) {
//					console.log(objs);
					maincnt.sroom = objs.id;
					CloseSelectTarget(2);
					maincnt.roomname = objs.house_type;
				},
				selectharea: function(objs) {
					CloseSelectTarget(3);
				},
				selectPrice: function(objs) {
					maincnt.sprice = objs.id;
					CloseSelectTarget(4);
					var showprice = '';
					if(objs.text.length > 7) {
						showprice = objs.text.substring(0, 7) + '..'
					}
					maincnt.pricename = showprice;
				},
				selectevent: function(ev1) {
					console.log('a');
				},
				priceShow:function(prices){
					if(prices.indexOf('元/㎡')>0){
						prices = prices.replace('元/㎡','');	
					}
					return prices;
				}
				
			}
		});
		$(document).ready(function() {
			document.body.style.display = 'inherit';
			loadHeaderAndFooter();
			loadData();
		});
		var bannerSwp;
		var cntSwp;

		function loadHeaderAndFooter() {
			$('#page_header').load('../template/header.html');
			$('#page_menu').load('../template/mainmenu.html', function() {
				changeMenu(1);
			});
			$('#city_sets').load('../template/choosecity.html');
			$('#page_footer').load('../template/footer.html');
		}
		
		function reloadMenu(){
			$('#page_menu').load('../template/mainmenu.html', function() {
				changeMenu(1);
			});
		}

		function doSearchHouse() {
			//			alert('search');
			window.location.href = "qgxf.html?name=" + maincnt.sname + "&type=" + maincnt.stype +
				"&room=" + maincnt.sroom + "&harea=" + maincnt.sharea + "&price=" + maincnt.sprice + "&region=" + maincnt.sregion;
		}

		function doKeyWordSearch() {
			window.location.href = "qgxf.html?name=" + maincnt.sname + "&type=" + maincnt.stype +
				"&room=" + maincnt.sroom + "&harea=" + maincnt.sharea + "&price=" + maincnt.sprice + "&region=" + maincnt.sregion;
		}

		function chooseSelectTarget(targetstr) {
			var tmpstr;
			for(var i = 1; i <= 4; i++) {
				tmpstr = 'sflag' + i;
				if(i==3)
					continue;
					
				if(targetstr == i) {
					if(document.getElementById(tmpstr).style.display == 'none') {
						document.getElementById(tmpstr).style.display = 'block';
					} else {
						document.getElementById(tmpstr).style.display = 'none';
					}
				} else {
					document.getElementById(tmpstr).style.display = 'none';
				}
			}
		}

		function CloseSelectTarget(targetstr) {
			var tmpstr = 'sflag' + targetstr;
			document.getElementById(tmpstr).style.display = 'none';
		}

		function loadBanner() {
			var urlstr = publicUrl + '/v1/advert/get-pc-adv';
			jQuery.get(urlstr, {
				atype: 1
			}, function(res) {
				var arr = res.data.pcadv;
				for(var i = 0; i < arr.length; i++) {
					arr[i].advicon = LocalImgUrl + arr[i].advicon;
				}
				maincnt.banner = arr;
//				console.log('arr=' + arr);

				setTimeout(function() {

					bannerSwp = new Swiper('.swiper-container1', {
						pagination: {
							el: '.sp1',
							clickable :true
						},
						autoplay: {
				            delay: 3000,
				            disableOnInteraction: false				            
			      	  	},
			      	  	loop:true,
					});

				}, 200);

			});
		}

		function loadNewHouse() {
			var urlstr = publicUrl + '/v1/advert/get-pc-adv';
			jQuery.get(urlstr, {
				atype: 2
			}, function(res) {

				var arr = res.data.pcadv;

//				console.log(arr);

				for(var i = 0; i < arr.length; i++) {
					arr[i].advicon = LocalImgUrl + arr[i].advicon;
				}

				if(arr.length > 0) {
					maincnt.goodHouse1.push(arr[0]);
				}

				if(arr.length >= 3) {
					maincnt.goodHouse2.push(arr[1]);
					maincnt.goodHouse2.push(arr[2]);
				}

				if(arr.length >= 5) {
					maincnt.goodHouse3.push(arr[3]);
					maincnt.goodHouse3.push(arr[4]);
				}

			});
		}

		//推荐
		function loadRecommendList() {
			var urlstr = publicUrl + '/v1/house/recommend-list';
			jQuery.get(urlstr, {}, function(res) {

				var arr = res.data.list_sh;
				var pushArr = [];
				for(var i = 0; i < arr.length; i++) {
					arr[i].img_path = ServerImgUrl + arr[i].img_path;
					if(arr[i].address.length > 16) {
						arr[i].address = arr[i].address.substr(0, 16) + '...';
					}
					if(arr[i].address == '') {
						arr[i].address = '暂无信息';
					}
					if(i < 4) {
						pushArr.push(arr[i]);
					}
				}
				maincnt.hdata1 = pushArr;

				var arr2 = res.data.list_hw;
				for(var i = 0; i < arr2.length; i++) {
					arr2[i].img_path = ServerImgUrl + arr2[i].img_path;
				}
				maincnt.hdata2 = arr2;

			});
		}

		function loadRentingRecommendList() {
			var urlstr = publicUrl + '/v1/renting/recommend-list';
			jQuery.get(urlstr, {}, function(res) {
				var arr = res.data.list_sh;
				var pushArr = [];
				for(var i = 0; i < arr.length; i++) {
					arr[i].img_path = ServerImgUrl + arr[i].img_path;
					arr[i].house_unit_price = arr[i].house_unit_price.split('-')[0];
					var arrindex = Math.floor(i / 4);
					if(!pushArr[arrindex]) {
						pushArr[arrindex] = [];
					}
					pushArr[arrindex].push(arr[i]);
					//					console.log('i='+i+'---'+arr[i].img_path);
				}
				maincnt.hdata3 = pushArr;

//				console.log(pushArr);

				var timeid = setTimeout(function() {
					clearTimeout(timeid);
					cntSwp = new Swiper('.swiper-container2', {
						pagination: {
							el: '.sp2',
						},
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
					});
				}, 200);
			});
		}

		function loadData() {
			loadBanner();
			loadNewHouse();
			loadRecommendList();
			loadRentingRecommendList();

		}
		
		
		var logincode = getParameter('code');
		var loginphone = getParameter('phone');
		if(logincode && logincode.length>0){
			//向服务器请求
		
			var urlstr = publicUrl + '/v1/wx-user/get-pc-sign';
			jQuery.get(urlstr, {code:logincode,phone:''}, function(res) {
//				console.log(res);
				if(res.code == 'success'){
					if(!res.data.mobile){
						//没有绑定手机去绑定手机
						//去绑定手机
						loadUserInfo(BindPhoneBack,res.data.uid);
					}
					else{
						//直接登录
						loadUserInfo(PhoneloginBack,res.data.uid);
					}
				}
			});
		}
		
		function PhoneloginBack(){
			window.location.href = '../pages/user.html';
		}
		
		//绑定手机返回
		function BindPhoneBack(){
			//1.打开输入登录用户名和密码界面
			//2.传递参数的时候带上uid
			var info = getUserInfo();
			showLoginBind(info.uid);
		}
		
		function toHotCity(cityid){
			var objs = getRegionDb(cityid);
			if(objs.cur == null)
				return;
			
//			console.log(objs);
//			return;
			
			if(objs.par){
				setCookie('kdcurcityId', objs.par.id);
				setCookie('kdcurcityName', objs.par.region_name);
			}
			else{
				setCookie('kdcurcityId', objs.cur.id);
				setCookie('kdcurcityName', objs.cur.region_name);
			}
			window.location.href = "qgxf.html?region="+cityid;
		}
		
		$('#indexsearchtxt').bind('keyup', function(event) {
	        if (event.keyCode == "13") {
	            //回车执行查询
	            doKeyWordSearch();
	        }
	    });
	</script>

</html>